<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../css/mui.min.css">
    <link rel="stylesheet" href="../../css/mycss/cheapList.css">
</head>
<style>

    .mui-table-view-cell:nth-child(1){
        border-right: 1px #696969 solid
    }
    .mui-table-view-cell:nth-child(3){
        border-right: 1px #696969 solid
    }
    .mui-table-view-cell:nth-child(1){
        border-bottom: 1px #696969 solid
    }
    .mui-table-view-cell:nth-child(2){
        border-bottom: 1px #696969 solid
    }
</style>
<body>
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--数据列表-->

        <div style="width: 100%;height: 20px;">
            <img style="width: 20px;;height: 20px;;margin-left: 10px;float: left" src="../../images/750大图.png" >
            <span style="font-size: 12px;">母婴用品</span>
        </div>
        <div style="margin-top:20px;margin-bottom:20px;">
            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell" style="padding: 10px;width: 49%;display: inline-block;overflow:visible">
                    <div class="cell-img"  style="width: 100%;">
                        <img src="../../images/750大图.png" style="width: 100%;">
                    </div>
                    <div  class="cell-content" style="display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;font-size:14px;height:40px;word-wrap:break-word;color: #696969;overflow: hidden;margin-top:5px;">
                        <span>撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分</span>
                    </div>
                    <div class="cell-price">
                        <div class="goods-detail-down" style="line-height: 12px;margin-top: 40px;float:left;">
                            <span style="font-weight: bold;color: rgb(245,0,89);font-size: 12px;letter-spacing:-5px;">¥</span>
                            <span style="font-size: 25px;font-weight: bold;color: rgb(245,0,89); letter-spacing:-2px;">1&nbsp</span>
                            <span style="font-size: xx-small;text-decoration:line-through;color: rgb(119,119,119)">¥12.05</span>
                            <strong style="font-size: 12px;color: rgb(119,119,119);margin-left: 5px ">已售:  999+</strong>
                        </div>
                    </div>
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>

                <li class="mui-table-view-cell" style="padding: 10px;width: 49%;display: inline-block;overflow:visible">
                    <div class="cell-img"  style="width: 100%;">
                        <img src="../../images/750大图.png" style="width: 100%;">
                    </div>
                    <div  class="cell-content" style="display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;font-size:14px;height:40px;word-wrap:break-word;color: #696969;overflow: hidden;margin-top:5px;">
                        <span>撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分</span>
                    </div>
                    <div class="cell-price">
                        <div class="goods-detail-down" style="line-height: 12px;margin-top: 40px;float:left;">
                            <span style="font-weight: bold;color: rgb(245,0,89);font-size: 12px;letter-spacing:-5px;">¥</span>
                            <span style="font-size: 25px;font-weight: bold;color: rgb(245,0,89); letter-spacing:-2px;">1&nbsp</span>
                            <span style="font-size: xx-small;text-decoration:line-through;color: rgb(119,119,119)">¥12.05</span>
                            <span style="font-size: 12px;">已售999+</span>
                        </div>
                    </div>
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>

                <li class="mui-table-view-cell" style="padding: 10px;width: 49%;display: inline-block;overflow:visible">
                    <div class="cell-img"  style="width: 100%;">
                        <img src="../../images/750大图.png" style="width: 100%;">
                    </div>
                    <div  class="cell-content" style="display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;font-size:14px;height:40px;word-wrap:break-word;color: #696969;overflow: hidden;margin-top:5px;">
                        <span>撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分</span>
                    </div>
                    <div class="cell-price">
                        <div class="goods-detail-down" style="line-height: 12px;margin-top: 40px;float:left;">
                            <span style="font-weight: bold;color: rgb(245,0,89);font-size: 12px;letter-spacing:-5px;">¥</span>
                            <span style="font-size: 25px;font-weight: bold;color: rgb(245,0,89); letter-spacing:-2px;">1&nbsp</span>
                            <span style="font-size: xx-small;text-decoration:line-through;color: rgb(119,119,119)">¥12.05</span>
                            <span style="font-size: 12px;">已售999+</span>
                        </div>
                    </div>
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>

                <li class="mui-table-view-cell" style="padding: 10px;width: 49%;display: inline-block;overflow:visible">
                    <div class="cell-img"  style="width: 100%;">
                        <img src="../../images/750大图.png" style="width: 100%;">
                    </div>
                    <div  class="cell-content" style="display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient: vertical;font-size:14px;height:40px;word-wrap:break-word;color: #696969;overflow: hidden;margin-top:5px;">
                        <span>撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分撒旦理发师两地分两地分</span>
                    </div>
                    <div class="cell-price">
                        <div class="goods-detail-down" style="line-height: 12px;margin-top: 40px;float:left;">
                            <span style="font-weight: bold;color: rgb(245,0,89);font-size: 12px;letter-spacing:-5px;">¥</span>
                            <span style="font-size: 25px;font-weight: bold;color: rgb(245,0,89); letter-spacing:-2px;">1&nbsp</span>
                            <span style="font-size: xx-small;text-decoration:line-through;color: rgb(119,119,119)">¥12.05</span>
                            <span style="font-size: 12px;">已售999+</span>
                        </div>
                    </div>
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>

            </ul>
        </div>

        <div style="width: 100%;height: 20px;">
            <img style="width: 20px;;height: 20px;;margin-left: 10px;float: left" src="../../images/750大图.png" >
            <span style="font-size: 12px;">计生用品</span>
        </div>

        <div style="margin-top:20px;margin-bottom:20px;">
            <ul class="mui-table-view mui-table-view-chevron" >
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
            </ul>
        </div>

        <div style="width: 100%;height: 20px;">
            <img style="width: 20px;;height: 20px;;margin-left: 10px;float: left" src="../../images/750大图.png" >
            <span style="font-size: 12px;">个人洗护</span>
        </div>

        <div style="margin-top:20px;margin-bottom:20px;">
            <ul class="mui-table-view mui-table-view-chevron" >
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
            </ul>
        </div>

        <div style="width: 100%;height: 20px;">
            <img style="width: 20px;;height: 20px;;margin-left: 10px;float: left" src="../../images/750大图.png" >
            <span style="font-size: 12px;">医药保健</span>
        </div>

        <div style="margin-top:20px;">
            <ul class="mui-table-view mui-table-view-chevron" >
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
                <li class="mui-table-view-cell" style="padding: 0;width: 49%;display: inline-block;">
                    <img style="width: 100%;height: 100%;" src="../../images/750大图.png">
                    <!--<a href="" style="float:left;width: 50%;height: 100px;"><img style="width: 100%;height: 100%;" src="../../images/750大图.png"></a>-->
                </li>
            </ul>
        </div>

    </div>

</div>
<script src="../../js/mui.min.js"></script>
<script>
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            }
        }
    });
    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function() {
            var table = document.body.querySelector('.mui-table-view');
            var cells = document.body.querySelectorAll('.mui-table-view-cell');
            for (var i = cells.length, len = i + 3; i < len; i++) {
                var li = document.createElement('li');
                li.className = 'mui-table-view-cell';
                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
                //下拉刷新，新纪录插到最前面；
                table.insertBefore(li, table.firstChild);
            }
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
        }, 1500);
    }
//    var count = 0;
//    /**
//     * 上拉加载具体业务实现
//     */
//    function pullupRefresh() {
//        setTimeout(function() {
//            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。
//            var table = document.body.querySelector('.mui-table-view');
//            var cells = document.body.querySelectorAll('.mui-table-view-cell');
//            for (var i = cells.length, len = i + 5; i < len; i++) {
//                var li = document.createElement('li');
//                li.className = 'mui-table-view-cell';
//                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
//                table.appendChild(li);
//            }
//        }, 1500);
//    }
</script>
</body>

</html>